<template>
  <div class="soil">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-tickets"></i> 土壤指标</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-if="soilFlag" class="content">
      <el-row :gutter="20" v-for="(x, i) in soilState" :key="i" class="row">
        <el-col :span="24">
          <x-soil :info="x"></x-soil>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
 
<script>
import XSoil from './SoilComponent.vue' 
 
export default {
  components: {
    XSoil 
  },
  data() {
    return {
      soilFlag: false,
      soilState: [],
      update: null,
      // 模拟土壤数据 
      mockSoilData: [
        {
          id: "soil_001",
          species: "oil",
          name: "1号土壤监测点",
          temperature: "22.5℃",
          humidity: "35%",
          nitrogen: "25mg/kg",
          phosphorus: "15mg/kg",
          potassium: "120mg/kg",
          ph: "6.8",
          salinity: "0.12%",
          lastUpdate: new Date().toLocaleTimeString()
        },
        {
          id: "soil_002",
          species: "oil",
          name: "2号土壤监测点",
          temperature: "21.8℃",
          humidity: "38%",
          nitrogen: "28mg/kg",
          phosphorus: "18mg/kg",
          potassium: "115mg/kg",
          ph: "7.1",
          salinity: "0.15%",
          lastUpdate: new Date().toLocaleTimeString()
        },
        {
          id: "soil_003",
          species: "oil",
          name: "3号土壤监测点",
          temperature: "23.2℃",
          humidity: "32%",
          nitrogen: "22mg/kg",
          phosphorus: "12mg/kg",
          potassium: "125mg/kg",
          ph: "6.5",
          salinity: "0.10%",
          lastUpdate: new Date().toLocaleTimeString()
        }
      ]
    }
  },
  methods: {
    // 模拟获取土壤指标数据 
    getSoilState() {
      // 模拟API延迟 
      setTimeout(() => {
        // 随机更新一些数据以模拟实时变化 
        this.mockSoilData.forEach(soil  => {
          soil.temperature  = `${(Math.random()  * 3 + 20).toFixed(1)}℃`;
          soil.humidity  = `${(Math.random()  * 10 + 30).toFixed(0)}%`;
          soil.nitrogen  = `${(Math.random()  * 10 + 20).toFixed(0)}mg/kg`;
          soil.phosphorus  = `${(Math.random()  * 8 + 10).toFixed(0)}mg/kg`;
          soil.potassium  = `${(Math.random()  * 20 + 110).toFixed(0)}mg/kg`;
          soil.ph  = (Math.random()  * 1 + 6.2).toFixed(1);
          soil.salinity  = `${(Math.random()  * 0.1 + 0.08).toFixed(2)}%`;
          soil.lastUpdate  = new Date().toLocaleTimeString();
        });
        
        this.soilState  = this.mockSoilData; 
        this.soilFlag  = true;
        console.log(' 土壤数据更新:', this.soilState); 
      }, 300);
    },
    
    // 模拟定时更新数据 
    startUpdateInterval() {
      this.update  = setInterval(() => {
        console.log(' 模拟数据更新');
        this.getSoilState(); 
      }, 10000);
    }
  },
  activated() {
    this.getSoilState(); 
    this.startUpdateInterval(); 
  },
  deactivated() {
    clearInterval(this.update); 
  }
}
</script>
 
<style scoped>
  .row {
    margin-bottom: 10px;
  }
</style>